/**
 * Created by zzc on 2017/11/21
 */


'use strict'

import React, {Component} from 'react';

import {
    View,
    Text,
    TextInput,
    StyleSheet
} from 'react-native';

import {
    StackNavigator,
    TabNavigator
} from 'react-navigation';

import {deviceWidth} from "../util/ScreenUtil";

export default class TitleBuilderComponent extends Component {

    constructor(props){
        super(props);
    }

    render(){
        return (
            <View style={styles.container}>

                <Text style={styles.middleTitle}>我是标题</Text>

            </View>);
    }

    _renderLeft=()=>{
        if(this.props.leftText != null && this.props.leftImage != null){
            return(
                <View style={styles.viewContainerChildLeft}>
                    <Image source={this.props.leftImage} style={styles.imageStyle}></Image>
                    <Text style={styles.leftText}>this.props.leftImage</Text>
                </View>
            );
        }else if(this.props.leftText != null){
            return(
                <View style={styles.viewContainerChildLeft}>
                    <Text style={styles.leftText}>this.props.leftImage</Text>
                </View>
            );
        }else if(this.props.leftImage != null){
            <View style={styles.viewContainerChildLeft}>
                <Image source={this.props.leftImage} style={styles.imageStyle}></Image>
            </View>
        }
    }

    _renderRight=()=>{
        if(this.props.rightText != null && this.props.rightImage != null){
            return(
                <View style={styles.viewContainerChildRight}>
                    <Image source={this.props.rightImage} style={styles.imageStyle}></Image>
                    <Text style={styles.leftText}>this.props.rightText</Text>
                </View>
            );
        }else if(this.props.rightText != null){
            return(
                <View style={styles.viewContainerChildRight}>
                    <Text style={styles.leftText}>this.props.rightText</Text>
                </View>
            );
        }else if(this.props.rightImage != null){
            <View style={styles.viewContainerChildRight}>
                <Image source={this.props.rightImage} style={styles.imageStyle}></Image>
            </View>
        }
    }
}

const styles = StyleSheet.create({
    container: {
        marginTop: Platform.OS == 'ios' ? 20 : 0,
        backgroundColor:'white',
        height:50,
        alignItems:'flex-center',
        flexDirection:'row',
    },
    middleTitle:{
        fontSize:20,
        color:'black',
        flex:1,
        textAlign:'center',
        justifyContent:'flex-center'
    },

    imageStyle:{
        width:25,
        height:25,
        resizeMode:'cover'
    },

    leftText:{
        fontSize:16,
        color:'black',
        textAlign:'center',
        marginLeft:3
    },

    viewContainerChildLeft:{
        flexDirection:'row',
        alignItems:'flex-center',
        justifyContent:'flex-start',
        width:deviceWidth/3
    },

    viewContainerChildRight:{
        flexDirection:'row',
        alignItems:'flex-center',
        justifyContent:'flex-end',
        width:deviceWidth/3
    }
})